<template>
    <div class="yxp">
        <div class="yxp-wordList-top">
            <div class="back" @click="handleBack">
                <span></span>
            </div>
            <div class="yxp-top-c">
        <span
                v-for="(item, i) in tab"
                :key="i"
                :class="{ active: tabIndex === i }"
                @click="handleTab(i)"
        >{{ item }}<span v-if="i == 0">({{num0}})</span><span v-else-if="i == 1">({{num1}})</span><span v-else>({{num2}})</span></span
        >
            </div>
            <div class="start-btn" @click="handleStartCheck">
                开始学习
            </div>
        </div>
        <div class="yxp-word-box" id="wordBox" >
            <div class="yxp-wordList-box">
                <div class="yxp-wordList-box-item">
                    <div class="yxp-wordList-main">
                        <div
                                class="yxp-wordList-item list-item"
                                v-for="(item, i) in wordList"
                                :key="item.id"
                                :class="{ active: item.num > 0 && curIndex === i }"
                                @click="handlePlay(item, i)"
                        >
                            <div class="yxp-wordList-item-l">{{ item.word }}</div>
                            <div
                                    class="yxp-wordList-item-r"
                                    v-if="item.num === 2 && curIndex === i"
                            >
                                {{ item.translate }}
                            </div>
                        </div>
                        <span
                                class="yxp-wordList-page-btn btn-hover"
                                id="word-list-more:btn"
                                v-show="wordList.length >= 20 && !isFinish"
                                @click="handleMoreClick"
                        >加载更多</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <audio ref="audio"></audio>
      <Timetips ref="timetips"></Timetips>
    </div>
</template>
<script>
    import Empty from "@/components/Empty.vue";
    import {
        getcompletelist,refreshnewround
    } from "@/services/word.js";
    import Timetips from "@/components/Timetips";
    export default {
        name: "familiar",
        components: {
            // wordList,
            // Study,
            Empty,
            Timetips
        },
        data() {
            return {
                tabIndex: 1,
                curIndex: 0,
                checkIndex: 0,
                package_id: 0,
                title: '',
                square_type: 0,
                code: "",
                type: "complete",
                complete: true, // 已会
                wordList: [],
                tab: ["一眼会", "学后检测会", "学后检测不会"],
                teachId: -1,
                canArr: [],
                canNotArr: [],
                isNone: false,
                pageIndex: 1,
                isFinish: false,
                num0:0,
                num1:0,
                num2:0,
                is_doubleminus:sessionStorage.getItem('doubleminus_type')
            };
        },
        created() {
            if (this.$route.query) {
                const query = this.$route.query;
                this.package_id = query.package_id;
                this.title = query.title;
            }
            this.getWordList(0,0);
            this.getWordList(2,0);
            this.getWordList(1,1);
        },
        mounted() {
        },
        beforeDestroy() {
         this.$refs.timetips.stopTimer();
         this.$refs.timetips.stopEndTimer();
        },
        methods: {
            async getWordList(i,j) {
                this.isFinish = true;
                if(j == 1) {
                    this.$loading.show();
                }
                let params = {
                    package_id: this.package_id,
                    page: this.pageIndex,
                    size:50
                };
                if(i > 0){
                    params.type = i;
                }
                let data = await getcompletelist(params);
                if (data.code === 1) {
                    if( j == 1) {
                        if(i == 1){
                            this.num1 = data.data.total;
                        }
                        this.$loading.hide();
                        if (data.data.list.length === 0) {
                            if (this.pageIndex === 1) {
                                this.isNone = true;
                            } else {
                                this.isFinish = true;
                            }
                            return;
                        }
                        data.data.list.map((item) => {
                            item.num = 0;
                            item.isSuccess = false;
                            item.isError = false;
                        });
                        this.wordList = [...this.wordList, ...data.data.list];
                        this.$nextTick(() => {
                            if (this.wordList.length < 7) {
                                this.isFinish = true;
                            } else {
                                this.isFinish = false;
                            }
                        });
                    }else{
                        if(i == 0){
                            this.num0 = data.data.total;
                        }else if (i == 1){
                            this.num1 = data.data.total;
                        }else{
                            this.num2 = data.data.total;
                        }
                    }
                } else if (data.code === "10001" || data.code === 10001) {
                    this.$loading.hide();
                    this.$toast("token过期，请重新登录");
                } else {
                    this.$loading.hide();
                    this.$toast(data.info);
                }
            },
            // 切换tab
            handleTab(i) {
                if (i === this.tabIndex) return;
                this.isNone = false;
                this.isStudy = false;
                this.tabIndex = i;
                this.pageIndex = 1;
                this.isFinish = false;
                this.wordList = [];
                this.canArr = [];
                this.canNotArr = [];
                this.isFinish = false;
                let scrollDom = document.getElementById("wordBox");
                scrollDom.scrollTop = 0;
                switch (i) {
                    case 0:
                        this.type = "easy";
                        break;
                    case 1:
                        this.type = "complete";
                        this.complete = true;
                        this.checkIndex = 0;
                        if (this.text === "提交") {
                            this.isStudy = true;
                        }
                        break;
                    case 2:
                        this.type = "difficult ";
                        break;
                    default:
                        break;
                }
                this.getWordList(i,1);
            },
            // 播放语音
            handlePlay(item, i) {
                this.curIndex = i;
                let num = item.num;
                num++;
                if (num > 2) num = 1;
                this.$set(item, "num", num);
                let audio = this.$refs.audio;
                audio.src = item.project_voice;
                audio.play();
                this.wordList.map((elem, index) => {
                    if (index !== i) {
                        this.$set(elem, "num", 0);
                    }
                });
            },
            //开始学习
            async handleStartCheck(){
                this.$loading.show();
                let params = {
                    package_id: this.package_id
                };
                if(this.tabIndex > 0){
                    params.type = this.tabIndex;
                }
                let data = await refreshnewround(params);
                if(data.code == 1){
                    this.$loading.hide();
                    this.$router.replace({
                        path: "/wordRemember",
                        query: {
                            package_id: this.package_id,
                            title: this.title
                        }
                    });
                }else{
                    this.$loading.hide();
                    this.$toast(data.info);
                }
            },
            handleScroll() {
                console.log(this.isFinish + "滚动");
                let scrollDom = document.getElementById("wordBox");
                if (scrollDom.scrollTop > 0) {
                    if (
                        scrollDom.clientHeight + parseInt(scrollDom.scrollTop) ==
                        scrollDom.scrollHeight
                    ) {
                        if (!this.isFinish) {
                            this.pageIndex++;
                            this.isFinish = true;
                            console.log(this.isFinish + "分页");
                            this.getWordList(this.tabIndex,1);
                        }
                    }
                }
            },
            handleMoreClick() {
                if (!this.isFinish) {
                    this.pageIndex++;
                    this.isFinish = true;
                    console.log(this.isFinish + "分页");
                    this.getWordList(this.tabIndex,1);
                }
            },
            //关闭弹窗
            handleClosed() {
                this.isShow = false;
            },
            // 返回
            handleBack() {
                this.$router.replace({
                    path: "/wordRemember",
                });
            }
        },
    };
</script>
<style lang="less" scoped>
    .yxp-wordList-top {
        justify-content: center;
        .yxp-top-c {
            display: flex;
            justify-content: center;
            align-items: center;
            .active {
                position: relative;
                color: #27bfa3;
                &::after {
                    display: block;
                    content: "";
                    position: absolute;
                    left: 50%;
                    bottom: 8px;
                    transform: translateX(-50%);
                    width: 23px;
                    height: 4px;
                    background: #27bfa3;
                    border-radius: 2px;
                }
                &:hover {
                    color: #27bfa3;
                }
            }
            span {
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #c7c7c7;
                margin-right: 50px;
                cursor: pointer;
                &:hover {
                    color: #7e7e7e;
                }
            }
        }
        .start-btn {
            width: 130px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
            background: linear-gradient(
                    360deg,
                    rgba(71, 203, 179, 1) 0%,
                    rgba(81, 211, 176, 1) 100%
            );
            box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
            border-radius: 30px;
            margin-right: 50px;
            cursor: pointer;
            &:hover {
                background: linear-gradient(
                        360deg,
                        rgba(39, 178, 152, 1) 0%,
                        rgba(52, 203, 163, 1) 100%
                );
                box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
            }
        }
    }

    .check-pop {
        height: 398px !important;
        .tips-img {
            display: inline-block;
            width: 190px;
            height: 190px;
            margin: 25px auto 0;
        }
        .tips {
            padding: 0 30px;
        }
        .btn {
            margin-top: 30px;
            &-item {
                width: 280px;
            }
        }
    }
    .yxp-familiar-pop {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 360px;
        height: 260px;
        background: #fff;
        border-radius: 10px;
        z-index: 1200;
        .close {
            position: absolute;
            right: 20px;
            top: 15px;
            width: 20px;
            height: 20px;
            background: url(../../../assets/word/close-icon.png) no-repeat;
            background-size: 20px 20px;
            cursor: pointer;
            &:hover {
                background-image: url(../../../assets/word/close-hover.png);
            }
        }
        .code {
            display: flex;
            justify-self: flex-start;
            align-items: center;
            text-align: left;
            border-bottom: 1px solid #dddddd;
            padding-top: 83px;
            margin-left: 40px;
            margin-right: 40px;
            span {
                display: block;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #24272b;
                margin-right: 20px;
            }
            input {
                width: 150px;
                border: none;
                outline: none;
                font-size: 20px;
                font-family: Microsoft YaHei;
            }
        }
        .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
            .btn-item {
                display: block;
                width: 130px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #fff;
                background: #27bfa3;
                border-radius: 100px;
                cursor: pointer;
                &:first-child {
                    margin-right: 20px;
                }
                &:hover {
                    background: #18a38a;
                }
            }
        }
    }
    ::-webkit-input-placeholder {
        color: #cbcbcb;
    }
</style>
